<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>用户登入</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <style>
        body{}
        header {
            height: 150px;
            background-image: url("../image/denglu_logo.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        header span {
            float: right;
            padding-top: 20px;
            padding-right: 10px;
            font-size: 16px;
            color: white;
        }

        section {
            width: 90%;
            margin: auto;
        }

        li {
            height: 50px;
            line-height: 50px;
        }

        ul li:first-child {
            font-weight: bolder;
            font-size: 18px;
        }

        ul li:nth-child(2) {
            border-bottom: 1px solid #B2B2B2;
        }

        ul li:nth-child(3) {
            border-bottom: 1px solid #B2B2B2;
        }

        li:nth-child(3) span {
            color: #777777;
            font-size: 14px;
            float: right;
        }

        ul li:nth-child(4) {
            margin-top: 10px;
            font-weight: bolder;
            background-color: black;
            color: white;
            width: 100%;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }

        ul li:last-child {
            font-size: 14px;
        }

        li input {
            width: 70%;
            outline: none;
            height: 50px;
            line-height: 50px;
        }

        footer {
            padding-top: 120px;
            display: block;
            text-align: center;
        }

        footer p {
            display: block;
            font-size: 14px;
            color: #8D8D8D;
        }

        footer img {
            width: 40px;
            padding-top: 10px;
        }
    </style>
</head>

<body>
    <header class="text">
        <span onclick="jump();">跳过</span>
    </header>

    <section>
        <ul>
            <li>欢迎使用黑狗伴我行</li>
            <li><input type="text" placeholder="输入手机号" id="tel" /></li>
            <li><input type="text" placeholder="输入验证码" id="yz" /><span onclick="getyz();">获取验证码</span></li>
            <li onclick="loginIn();">登入注册</li>
            <li>登入或注册即代表同意《黑狗伴我行用户协议》</li>
        </ul>
    </section>

    <footer>
        <p>或用以下方式进行登入</p>
        <img src='../image/weixin.png ' onclick="wx();">
    </footer>
</body>
<script type=" text/javascript " src="../script/api.js "></script>
<script type="text/javascript ">
    apiready = function() {}
    function loginIn() {

        var tel = $api.val($api.byId('tel')),
            yz = $api.val($api.byId('yz'));
        const reg = /^1[3|4|5|7|8|9][0-9]\d{8}$/;
        if (!$api.trim(tel)) {
            api.toast({
                msg: '请输入电话号码',
                duration: 1000,
                location: 'middle'
            });
            return;
        }

        if (!reg.test(tel)) {
            api.toast({
                msg: '电话号码格式错误',
                duration: 1000,
                location: 'middle'
            });
            return;
        }

        if (!$api.trim(yz)) {
            api.toast({
                msg: '请输入验证码',
                duration: 1000,
                location: 'middle'
            });
            return;
        }

        /*** 加载动画 ***/
        api.showProgress({
            title: ' ',
            text: '玩命加载中...',
            modal: true
        });
        api.ajax({
            url: 'https://api.yazhuaa/?serAdmin.Login&tel=' + tel,
            timeout: 10,
            dataType: 'json',
            method: 'post'
        }, function(ret, err) {
            api.hideProgress();

            if (ret.data.result == false) {
                api.toast({　　
                    msg: '登录失败',
                    　　duration: 1000,
                    　　location: 'middle'　　　
                });　　　　
            } else {
                if (ret.data.result.tel) {
                    $api.setStorage('tel', ret.data.result.tel)
                };
                api.toast({　　　　　　
                    msg: '登录成功',
                    duration: '1200',
                    localtion: 'middle'　　　　　　
                });
                $api.setStorage('isLogin', true);
                setTimeout(function() {
                    api.openWin({　　　　
                        name: 'index',
                        　　url: '../index.html',
                        　　bounces: false,
                        　　animation: {　　　　
                            type: "push",
                            　　　　duration: 300　　　　
                        }　　　　
                    });
                }, 1000);
            }

            /*** 登录异常 ***/
            if (err) {
                api.toast({　　　　　　
                    msg: '网络异常，请稍后重试',
                    　　　　　　duration: '1300',
                    　　　　　　localtion: 'middle'　　　　
                });
                return;
            }
        });
    };

    function jump() {
        api.openWin({　　　　
            name: 'index',
            　　url: '../index.html',
        });
    }

    function wx() {
        api.confirm({
          msg: '确定使用微信进行登入吗',
            // msg: 'testmsg',
            buttons: ['确定', '取消']
        }, function(ret, err) {
            api.openWin({　　　　
                name: 'index',
                　　url: '../index.html',
            });
        });

    }

    function getyz() {
        //smsverify
    }


</script>

</html>
